@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}

header .header-title span.header-title1{
    margin-left: vw(-35);
}

section{
    bottom: 0;
    .newring-box{
        width: vw(500);
        margin: 0 auto;
        .newring-input{
            width: 100%;
            background: #dcdcdc;
            border-radius: vw(5);
            margin-top: vw(40);
            box-sizing: border-box;
            padding: 0 2%;
        }
        #newring-input1{
            height: vw(67);
            input{
                font-family: "幼圆";
                font-size: vw(20);
                height: 100%;
                border: none;
                width: 98%;
                background: transparent;
                padding-left: vw(15);
                letter-spacing: vw(1);
            }
        }
        #newring-input2{
            height: vw(335);
            textarea{
                font-family: "幼圆";
                height: 100%;
                font-size: vw(20);
                padding-top: vw(15);
                width: 98%;
                border: none;
                padding-left: vw(15);
                letter-spacing: vw(1);
                resize: none;
                background: transparent;
            }
        }
        #newring-input3{
            width: vw(300);
            height: vw(68);
            margin: vw(38) auto 0;
            background: none;
            input{
                width: 100%;
                height: 100%;
                border-radius: vw(5);
                background: #333333;
                font-size: vw(28);
                color: #FFFFFF;
                font-family: "华文细黑";
            }
        }
    }
}

.select-text{
    box-sizing: border-box;
    height: vw(137);
    width: 100%;
    text-align: center;
    color: #7f7f7f;
    padding-top: vw(20);
    h2{
        font-size: vw(24);
        line-height: vw(36);
        font-weight: normal;
    }
    p{
        font-size: vw(20);
        line-height: vw(30);
    }
}

@keyframes kenburns-top{
    0%{
        transform:scale(1) translateY(0);
        transform-origin:50% 16%;
    }
    50%{
        transform:scale(1.25) translateY(-15px);
        transform-origin:top;
    }
    100%{
        transform:scale(1) translateY(0);
        transform-origin:50% 16%;
    }
}




@keyframes roll-in-blurred-left{
    0%{
        transform:translateX(-1000px) rotate(-720deg);
        filter:blur(50px);
        opacity:0;
    }
    100%{
        transform:translateX(0) rotate(0deg);
        filter:blur(0);
        opacity:1;
    }
}
.select-pic{
    width: vw(609);
    margin: 0 auto;
    .select-item{
        float: left;
        width: vw(195);
        height: vw(195);
        margin-right: vw(12);
        margin-bottom: vw(10);
        position: relative;
        .select-item-pic{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
                animation:kenburns-top 10s ease-out infinite both;
            }
        }
        p{
            font-family: "华文细黑";
            font-size: vw(24);
            color: #FFFFFF;
            line-height: vw(195);
            text-align: center;
        }
    }
    
    .select-item1::after{
        position: absolute;
        bottom: vw(-4);
        right: vw(-4);
        content: "";
        color: #FFFFFF;
        width: vw(30);
        height: vw(30);
        background: url(../../img/other/select-item-after.png) no-repeat center center  #040404;
        background-size: vw(21) vw(14);
        border-radius: 50%;
        animation:roll-in-blurred-left .65s cubic-bezier(.23,1.000,.32,1.000) both;
    }
    .select-item1 .select-item-pic>img{
        animation:kenburns-top 5s ease-out infinite both;
    }
    .select-item:nth-of-type(3n){
        margin-right: 0;
    }
    
}


.header-right-pic{
    width: vw(42);
    height: vw(34);
    img{
        width: 100%;
    }
}

.newactivity{
    width: vw(585);
    margin: 0 auto;
    .newactivity-input{
        width: 100%;
        background: #f2f2f2;
        margin-bottom: vw(15);
        box-sizing: border-box;
        textarea{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            border: none;
            background: transparent;
            resize: none;
            overflow-y: scroll;
            padding: vw(20);
            font-family: "幼圆";
            font-size: vw(24);
            color: #797979;
        }
    }
    .newactivity-input:first-of-type{
        margin-top: vw(28);
        height: vw(230);
    }
    .newactivity-input:nth-of-type(2){
        padding-left: vw(17);
        padding-top: vw(16);
        height: vw(200);
    }
}

.newactivity-input-1{
    box-sizing: border-box;
    width: vw(165);
    height: vw(165);
    border: vw(3) solid #d9d9d9;
    background: url(../../img/other/newactivity-select-bg.png) no-repeat center;
//  select{
//      width: 100%;
//      height: 100%;
//      opacity: 0;
//      appearance: none;
//      -webkit-appearance: none;
//      -moz-appearance: none;
//      option{
//          text-align: center;
//      }
//      
//  }  
}
.newactivity-input-2{
    width: vw(230);
    height: vw(36);
    background: #d9d9d9;
    margin-top: vw(129);
    margin-left: vw(24);
    
    .newactivity-input-2-pic{
        width: vw(17);
        height: vw(23);
        margin-top: vw(7);
        margin-right: vw(8);
        margin-left: vw(12);
        position: relative;
        img{
            position: absolute;
            width: 100%;
            height: 100%;
        }
    }
    p{
        font-size: vw(20);
        line-height: vw(36);
        color: #6c6c6c;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }
}

.newactivity-select{
    width: 100%;
    box-sizing: border-box;
    height: vw(80);
    padding-top: vw(25);
    border-bottom: 1px solid #cccccc;
    .newactivity-select-left,
    .newactivity-select-right{
        height: vw(25);
        img{
            height: 100%;
        }
    }
    .newactivity-select-left img{
        float: left;
    }
    .newactivity-select-center{
        overflow-x: hidden;
        height: vw(30);
        font-size: vw(24);
        line-height: vw(24);
        padding-left: vw(23);
    }
}
#newactivity-select1{
    margin-top: vw(16);
    border-top: 1px solid #cccccc;
}

.newactivity-select-right2{
    box-sizing: border-box;
    height: vw(56);
    width: vw(108);
    border-radius: vw(28);
    border: 1px solid #cccccc;
    margin-top: vw(-13);
    padding: 0 vw(5);
    position: relative;
    .newactivity-select-circle{
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        width: vw(54);
        height: vw(54);
        border: 1px solid #7b7b7b;
        border-radius: 50%;
        box-shadow: 0 0 1px 1px #c0c0c0;
        z-index: 2;
        transition: 0.3s;
        background: #d9d9d9;
        box-shadow:0 2px 4px rgba(0,0,0,0.1);
        transform: translateZ(3px) translateX(0);
        
    }
    
    span{
        font-family: "华文细黑";
        font-size: vw(20);
        color: #7f7f7f;
        line-height: vw(56);
    }
}
.newactivity-select-right22 .newactivity-select-circle{
    transition: 0.3s;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
    transform: translateZ(3px) translateX(100%);
    background: greenyellow;
}
.newactivity-link{
    width: 100%;
    h4{
        line-height: vw(74);
        font-size: vw(24);
        font-weight: normal;
    }
    .newactivity-link-box{
        width: vw(433);
        margin: 0 auto;
        .newactivity-link0{
            height: vw(54);
            img{
                height: 100%;
            }
        }
        #newactivity-link1{
            width: vw(75);
            margin: 0 auto;
            text-align: center;
        }
    }
}


.ringclassify-search{
    height: vw(54);
    width: vw(593);
    margin: vw(18) auto vw(20);
    border-radius: vw(9);
    background: #f2f2f2;
    
    input[type="search"]{
        width: 98%;
        height: 100%;
        border-radius: vw(9);
        border: none;
        text-align: center;
        color: #797979;
        font-size: vw(26);
        background:  url(../../img/other/ringclassify-search.png) no-repeat 58% center;
        background-size: vw(24) vw(25);
    }
    input[type="search"]:focus{
        background: transparent;
    }
}
#ringclassify-search2{
    width: vw(520);
    margin: vw(14) auto 0;
}

.ringclassify-content{
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #b2b2b2;
    position: relative;
    .ringclassify-nav{
        box-sizing: border-box;
        width: vw(160);
        float: left;
        ul{
            width: 100%;
            li{
                box-sizing: border-box;
                height: vw(100);
                width: 100%;
                background: #e5e5e5;
                border: 1px solid #cccccc;
                font-size: vw(26);
                line-height: vw(100);
                text-align: center;
                position: relative;
            }
            li:before{
                position: absolute;
                content: "";
                left: 0;
                top: 0;
                height: 100%;
                border-left: vw(6) solid black;
                opacity: 0;
                transform: scaleY(0);
                
            }
            li.ringclassify-nav-active{
                background: #FFFFFF;
                border: none;
                transition: 1s;
            }
            li.ringclassify-nav-active:before{
                opacity: 1;
                transform: scaleY(1);
                transition: 0.5s;
            }
        }
    }
    .ringclassify-item-box{
        float: right;
        
        .ringclassify-item{
            display: none;
            width: vw(461);
            
            .ringclassify-item1{
                width: 100%;
                height: vw(83);
                margin: vw(18) 0;
                
            }
            .ringclassify-item-left{
                height: 100%;
                width: vw(83);
                overflow: hidden;
                img{
                    height: 100%;
                    width: 100%;
                }
            }
            .ringclassify-item-right{
                height: 100%;
                width: vw(360);
                box-sizing: border-box;
                border-bottom: 1px solid #b2b2b2;
                .ringclassify-item-right-jia{
                    width: vw(25);
                    height: vw(25);
                    margin-top: vw(24);
                    margin-right: vw(28);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .ringclassify-item-right-text{
                    height: 100%;
//                  overflow-x: hidden;
                    p{
                        font-size: vw(24);
                        line-height: vw(36);
                    }
                    .ringclassify-item-right-text-box{
                        height: vw(23);
                        margin-top: vw(17);
                        .ringclassify-item-right-text-view{
                            height: 100%;
                            width: vw(80);
                            font-size: 0;
                            display: inline-block;
                            vertical-align: top;
                            img{
                                vertical-align: top;
                            }
                            span{
                                font-family: "微软雅黑";
                                font-size: vw(20);
                                line-height: vw(23);
                                color: #7f7f7f;
                                margin-left: vw(8);
                            }
                            #ringclassify-item-right-text-view1{
                                width: vw(28);
                                height: vw(19);
                            }
                            #ringclassify-item-right-text-view2{
                                width: vw(18);
                                height: vw(21);
                            }
                            #ringclassify-item-right-text-view3{
                                width: vw(23);
                                height: vw(23);
                            }
                        }
                    }
                }
            }
        }
        .ringclassify-item:first-of-type{
            display: block;
        }
    }
}

#search-header{
    height: vw(135);
}
#search-header~section{
    top: vw(135);
    
}
.search-nav{
    width: 100%;
    height: vw(60);
    margin-top: vw(6);
    ul{
        width: 100%;
        height: 100%;
        font-size: 0;
        li.search-nav-li{
            float: left;
            box-sizing: border-box;
            width: 25%;
            height: 100%;
            font-size: vw(26.67);
            line-height: vw(60);
            text-align: center;
            position: relative;
        }
        li.search-nav-li:active{
            background: #DCDCDC;
            transition: 0.3s;
        }
        .search-nav-active::after{
            position: absolute;
            content: "";
            bottom: 0;
            left: 0;
            width: 100%;
            border-bottom: 2px solid black;
            animation: scale1 0.5s forwards;
        }
    }
}
@keyframes scale1{
    0%{
        transform: scaleX(0);
    }
    100%{transform: scaleX(1);}
}
.search-content-box{
    width: 100%;
    .search-content{
        width: 100%;
        display: none;
        .search-item{
            height: vw(282);
            width: 100%;
            margin-top: vw(14);
            .search-item-top{
                height: vw(58);
                width: vw(612);
                margin: 0 auto vw(12);
                .search-item-top-left{
                    width: vw(58);
                    height: vw(58);
                    margin-right: vw(12);
                    border-radius: 50%;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                >div:nth-of-type(2){
                    float: right;
                    width: vw(25);
                    height: vw(25);
                    margin-top: vw(20);
                    margin-right: vw(14);
                }
                .search-item-top-right1{
                    background: url(../../img/other/search-item-right1.png) no-repeat center;
                    background-size: 100% auto;
                }
                .search-item-top-right2{
                    background: url(../../img/other/search-item-right2.png) no-repeat center;
                    background-size: 100% auto;
                }
                .search-item-top-center{
                    p{
                        height: vw(34);
                        font-size: vw(24);
                        line-height: vw(34);
                        span{
                            box-sizing: border-box;
                            height: vw(25);
                            padding: 0 vw(9);
                            border: 1px solid #e5e5e5;
                            border-radius: vw(9);
                            margin-left: vw(8);
                            font-size: vw(14);
                            line-height: vw(25);
                            color: #787878;
                        }
                    }
                    .search-item-top-center-box{
                        height: vw(23);
                        vertical-align: top;
                        font-size: 0;
                        .search-item-top-center-view{
                            height: vw(23);
                            display: inline-block;
                            margin-right: vw(25);
                            vertical-align: bottom;
                            span{
                                margin-left: vw(8);
                                font-size: vw(20);
                                color: #7f7f7f;
                            }
                            #search-item-top-center-view1{
                                width: vw(28);
                                height: vw(19);
                            }
                            #search-item-top-center-view2{
                                width: vw(18);
                                height: vw(21);
                            }
                            #search-item-top-center-view3{
                                width: vw(23);
                                height: vw(23);
                            }
                        }
                    }
                }
            }
            .search-item-pic{
                width: 100%;
                height: vw(212);
                >div{
                    height: 100%;
                    width: vw(212);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .search-item-pic-left{
                    width: vw(213);
                }
                .search-item-pic-right{
                    width: vw(211);
                }
                .search-item-pic-center{
                    margin: 0 auto;
                }
            }
        }
    }
    .search-content:first-of-type{
        display: block;
    }
}


#message-section{
    bottom: vw(47);
    .message-item1{
        box-sizing: border-box;
        width: 100%;
        height: vw(102);
        padding-top: vw(36);
        border-bottom: 1px solid #ececec;
        .message-item1-box{
            width: vw(585);
            height: vw(32);
            margin: 0 auto vw(30);
            font-size: vw(22);
            line-height: vw(32);
            .message-item1-left{
                height: vw(32);
                margin-right: vw(20);
//              vertical-align: middle;
                img{
                    float: left;
                    height: 100%;
                }
                span{
                    float: left;
                    height: 100%;
                    margin-left: vw(22);
                }
            }
            .message-item1-right{
                width: vw(24);
                height: vw(24);
                margin-top: vw(4);
                img{
                    float: right;
                    height: 100%;
                    transition: 0.3s;
                }
            }
            .message-item1-center{
                height: 100%;
                color: #a3a3a3;
                overflow: hidden;
            }
        }
    }
    .message-item2{
        border: none;
        height: auto;
        .message-item2-right{
            img{
                transform: rotateZ(90deg);
                transition: 0.3s;
            }
        }
        
    }
}
@keyframes messageenter{
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
.message-item2-list2{
    opacity: 0;
    animation: messageenter 0.5s 0.08s forwards;
}
#message-item2-list2-secondchild{
    animation-delay: 0.16s;
}
.message-item2-list1{
    box-sizing: border-box;
    height: vw(125);
    width: vw(585);
    border-top: 1px solid #ececec;
    margin: 0 auto;
    padding-top: vw(19);
    display: none;
     .message-item2-list1-left{
        width: vw(86);
        height: vw(86);
        margin-right: vw(25);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .message-item2-list1-right{
        color: #a3a3a3;
        font-size: vw(18);
        margin-top: vw(20);
        line-height: vw(18);
    }
    .message-item2-list1-center{
        h2{
            height: vw(42);
            font-size: vw(22);
            line-height: vw(42);
            font-weight: normal;
            img{
                height: vw(21);
                vertical-align: middle;
            }
        }
        p{
            font-size: vw(20);
            line-height: vw(20);
            color: #a3a3a3;
        }
    }
}
.message-item3{
    width: 100%;
    .message-item3-title{
        width: 100%;
        height: vw(56);
        background: #f2f2f2;
        color: #9b9b9b;
        font-size: vw(22);
        line-height: vw(56);
        box-sizing: border-box;
        padding-left: vw(28);
    }
    .message-item2-list3{
        display: block;
    }
    #message-item3-firstchild{
        border-top: none;
    }
    .message-item2-list3-p{
        width: vw(180);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.message-item4{
    width: 100%;
    border-top: 1px solid #ececec;
    .message-item4-1{
        box-sizing: border-box;
        padding: vw(33) vw(27) 0;
        width: 100%;
        height: vw(100);
        border-bottom: 1px solid #ececec;
        .message-item4-1-left{
            width: vw(52);
            img{
                height: 100%;
            }
        }
        #message-item4-1-left1{
            height: vw(32);
        }
        #message-item4-1-left2{
            height: vw(32);
        }
        #message-item4-1-left3{
            height: vw(30);
        }
        #message-item4-1-left4{
            height: vw(26);
        }
        .message-item4-1-right{
            height: vw(25);
            width: vw(15);
            img{
                height: 100%;
                width: 100%;
            }
        }
        .message-item4-1-center{
            font-size: vw(24);
            line-height: vw(28);
        }
    }
}

.message-item5{
    width: 100%;
    margin-bottom: vw(45);
    .message-item5-1{
        width: 100%;
        height: vw(100);
        overflow-x: hidden;
        border-bottom: 1px solid #ececec;
        .message-item5-1-left{
            width: vw(51);
            height: vw(51);
            margin-top: vw(24);
            margin-left: vw(27);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .message-item5-1-right{
            height: 100%;
            width: vw(240);
            color: #FFFFFF;
            font-size: vw(24);
            line-height: vw(100);
            text-align: center;
            display: none;
            >div{
                float: left;
                width: 50%;
                height: 100%;
                
            }
            .message-item5-1-right1{
                background: #cccccc;
            }
            .message-item5-1-right2{
                background: #7f7f7f;
            }
        }
        .message-item5-1-rightt{
            display: block;
            animation: messagetranslate 0.5s forwards;
            
        }
        .message-item5-1-center{
            overflow: hidden;
            box-sizing: border-box;
            color: #5c5c5c;
            padding: vw(24) 0 0 vw(22);
            white-space: nowrap;
            overflow: hidden;
            p:first-of-type{
                font-size: vw(20);
                line-height: vw(24);
                overflow: hidden;
                text-overflow: ellipsis;
            }
            p~p{
                font-size: vw(16);
                line-height: vw(30);
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
    
}
 @keyframes messagetranslate{
     0%{
         opacity: 0;
          transform: translateX(vw(240));
     }
     100%{
         opacity: 1;
         transform: translateX(vw(0));
     }
 }
